<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="titleType" label="类型" width="150">
        <template slot-scope="scope">
          {{ questiontype(scope.row.titleType) }}
        </template>
      </el-table-column>
      <el-table-column prop="subject" label="科目" width="120">
      </el-table-column>
      <el-table-column prop="question" label="题目" width="310">
      </el-table-column>
      <el-table-column prop="answer" label="答案" width="352">
      </el-table-column>

      <el-table-column label="操作" width="120" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="cancelcollect(scope.row)"
            >取消收藏</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 点击查看详情的弹出框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="70%">
      <h4>问题</h4>
      <span>{{ question }}</span>
      <el-divider></el-divider>
      <h4>答案</h4>
      <h3>{{ answer }}</h3>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
import commons from "../../../assets/commons";
export default {
  data() {
    return {
      question: "",
      answer: "",
      dialogVisible: false,
      tableData: [],
      type_question: ["选择题", "填空题", "解答题", "作文题"]
    };
  },
  methods: {
    //查出所有的收藏题
    findCollectTitle() {
      axios
        .get(
          commons.baseUrl +
            "student/findCollectTitle?u_id=" +
            this.$store.state.userid
        )
        .then(res => {
          console.log(res);
          this.tableData = res.data;
        });
    },
    //取消收藏
    cancelcollect(row) {
      console.log(row);
      axios
        .get(
          commons.baseUrl +
            "student/cancelcollect?titleid=" +
            row.titleid +
            "&u_id=" +
            this.$store.state.userid +
            "&titleType=" +
            row.titleType
        )
        .then(res => {
          if (res.data == true) {
            this.collect();
            this.findCollectTitle();
          }
          console.log(res);
        });
    },
    collect() {
      this.$message("取消收藏成功");
    },
    questiontype(titleType) {
      return this.type_question[titleType - 1];
    },
    handleClick(row) {
      console.log(row);
    }
  },
  mounted() {
    this.findCollectTitle();
  }
};
</script>
<style scoped></style>
